<template lang="html">
  <section class="travel">
    <div class="header">
      <h1>大数据作战平台-旅客分析</h1>
    </div>
    <div class="travel_main">
      <div class="travel_lefttop">
          <ul>
            <li>
              <h3>旅客总量</h3>
              <p class="num">{{formatNum(alltraveller[control])}}<span>(人次)</span></p>
            </li>
            <li>
              <h3>省内旅客总量</h3>
              <p class="num">{{formatNum(outtraveller[control])}}<span>(人次)</span></p>
            </li>
            <li>
              <h3>省外旅客总量</h3>
              <p class="num">{{formatNum(intraveller[control])}}<span>(人次)</span></p>
            </li>
          </ul>
      </div>
      <div class="travel_leftbottom">
        <left-bar chartId='left_bar' :options='hotelTop10[control]'></left-bar>
      </div>
      <div class="travel_map">
        <div class="control">
          <div class="radios">
            <el-radio-group v-model="control" @change='handlerRadioChange'>
              <el-radio label="week">近7天</el-radio>
              <el-radio label="month">近30天</el-radio>
              <el-radio label="year">历史总量</el-radio>
            </el-radio-group>
          </div>
        </div>
        <travel-map-bg class='map_bg' chartId='travel_map_bg' :options='[]'></travel-map-bg>
        <travel-map chartId='travel_map' :options='mapSeries'></travel-map>
      </div>
      <div class="travel_righttop">
        <h2>旅客来源地排名</h2>
        <ul class="list_context" :class='{firstList : travelListIndex == 0}'>
          <li v-for='(item,index) in travelListData[control][travelListIndex]'>
            <span class="circle_num">{{index + 1 + (20 * travelListIndex)}}</span>
            <span class="context_name">{{item.lklydmc}}</span>
            <span>：</span>
            <span class="context_num">{{formatNum(item.lkzl)}}</span>
          </li>
        </ul>
        <ul class="list_nav" @mouseover='clearTimer' @mouseout='autoplay'>
          <li v-for='(item,index) in travelListData[control]'
            @click='travelListIndex = index'
            :class='{active : index === travelListIndex}'></li>
        </ul>
      </div>
      <div class="travel_rightbottom">
        <rightbottom-pie chartId='right_pie' :options='travelArea[control]'></rightbottom-pie>
      </div>
    </div>
  </section>
</template>

<script>
import leftBar from '../components/travel/left_bar.vue'
import travelMap from '../components/travel/travelmap.vue'
import travelMapBg from '../components/travel/travelmap_bg.vue'
import rightbottomPie from '../components/travel/right_bottom_pie.vue'
import {tableApi} from '../api/api'
import {chunk} from '../util/tool'
//地图数据
import {geoCoordMap} from '../components/travel/getGoordMapData'
export default {
  components : {
    leftBar,
    travelMap,
    travelMapBg,
    rightbottomPie
  },
  data(){
    return {
      //全局参数
      travelListIndex : 0,
      timer : null,
      control : 'month',
      //数据参数
      alltraveller : {
        week : 0,
        month : 0,
        year : 0
      },
      outtraveller : {
        week : 0,
        month : 0,
        year : 0
      },
      intraveller : {
        week : 0,
        month : 0,
        year : 0
      },
      //旅馆top10
      hotelTop10 : {
        week : {
          yaxis : [],
          maxData : [],
          data : [],
        },
        month : {
          yaxis : [],
          maxData : [],
          data : [],
        },
        year : {
          yaxis : [],
          maxData : [],
          data : [],
        },

      },
      //右下角饼图
      travelArea : {
        week : {
          data : []
        },
        month : {
          data : []
        },
        year : {
          data : []
        },

      },
      //地图数据
      mapSeries : [],
      //旅客来源列表
      travelListData : {
        week : [],
        month : [],
        year : []
      }
    }
  },
  methods : {
    autoplay(){
      this.clearTimer()
      let _this = this
      this.timer = setInterval(()=>{
        _this.play()
      },3000)
    },
    clearTimer(){
      clearInterval(this.timer);
    },
    formatNum(n){
       var b=parseInt(n).toString();
       var len=b.length;
       if(len<=3){return b;}
       var r=len%3;
       return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(",");
     },
     //轮播
     play(){
      let _length = this.travelListData[this.control].length;
       this.travelListIndex++;
       if(this.travelListIndex == _length){
         this.travelListIndex = 0;
       }
     },
     handlerRadioChange(){
       this.autoplay()
     },
     //轨迹数据处理
     convertData(data){
       let res = [];
       for (let i = 0; i < data.length; i++) {
           let dataItem = data[i];
           let fromCoord = geoCoordMap[dataItem[0].name];
           let toCoord = geoCoordMap[dataItem[1].name];
           if (fromCoord && toCoord) {
               res.push([{
                   coord: toCoord
               }, {
                   coord: fromCoord
               }]);
           }
       }
       return res;
     },
     //echart地图数据处理
     dealMapData(data){
       let color = ['#ffb400'];
       [['广州', data]].forEach((item, i) => {
           this.mapSeries.push({
               type: 'lines',
               zlevel: 1,
               effect: {
                   show: true,
                   period: 6,
                   trailLength: 0.5,
                   color: '#fff',
                   symbolSize: 2
               },
               lineStyle: {
                   normal: {
                       color: color[i],
                       width: 0,
                       curveness: 0.2
                   }
               },
               data: this.convertData(item[1])
           },
           {
               type: 'lines',
               zlevel: 2,
               effect: {
                   show: true,
                   period: 6,
                   trailLength: 0,
                   symbol: 'arrow',
                   symbolSize: 6
               },
               lineStyle: {
                   normal: {
                       color: '#ffb400',
                       width: 1,
                       opacity: 0.4,
                       curveness: 0.2
                   }
               },
               data: this.convertData(item[1])
           },
           {
               type: 'effectScatter',
               coordinateSystem: 'geo',
               zlevel: 2,
               rippleEffect: {
                   brushType: 'stroke'
               },
               label: {
                   normal: {
                       show: true,
                       position: 'right',
                       formatter: '{b}'
                   }
               },
               symbolSize: function (val) {
                 let _val = val[2]
                   if(_val < 10000){
                     return 4;
                   }else if (_val < 100000){
                     return 6;
                   }else if (_val < 1000000){
                     return 10;
                   }else if(_val < 10000000){
                     return 13
                   }else {
                     return 16
                   }
               },
               itemStyle: {
                   normal: {
                       // color: '#ffb400'
                       color : (param) => {
                         let _val = param.value[2]
                         if(_val < 10000){
                           return '#3bff00';
                         }else if (_val < 100000){
                           return '#b5ff00';
                         }else if (_val < 1000000){
                           return '#ffed00';
                         }else if(_val < 2000000){
                           return '#ff8200'
                         }else {
                           return '#ff5400'
                         }
                       }
                   }
               },
               data: item[1].map(function (dataItem) {
                   return {
                       name: dataItem[1].name,
                       value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                   };
               })
           }
         );
       });
       this.mapSeries.push({
           name: '阳江',
           type: 'effectScatter',
           coordinateSystem: 'geo',
           zlevel: 2,
           rippleEffect: {
               brushType: 'stroke'
           },
           label: {
               normal: {
                   show: true,
                   position: 'right',
                   formatter: '{b}'
               }
           },
           symbolSize: 22,
           itemStyle: {
               normal: {
                   color: '#ff4200'
               }
           },
           data: [{name : '江门',value : [113.5107,23.2196,60]}]
       })
     },
     //左上角数据统计
     getTravelCounts(tableName){
       tableApi(tableName).then(res=>{
         let _resData = res.data.data
         //周
         this.alltraveller.week = _resData['7_charts'][0].lkzl
         this.outtraveller.week = _resData['7_charts'][0].snlkzl;
         this.intraveller.week = _resData['7_charts'][0].swlkzl;
         //月
         this.alltraveller.month = _resData['30_charts'][0].lkzl
         this.outtraveller.month = _resData['30_charts'][0].snlkzl;
         this.intraveller.month = _resData['30_charts'][0].swlkzl;
         //年
         this.alltraveller.year = _resData['charts'][0].lkzl
         this.outtraveller.year = _resData['charts'][0].snlkzl;
         this.intraveller.year = _resData['charts'][0].swlkzl;
       })
     },
     //左下bar数据统计
    getHotelTop10(tableName){
      let _list = ['week','month','year']
      _list.forEach(elem => {
        this.hotelTop10[elem].yaxis = [];
        this.hotelTop10[elem].maxData = [];
        this.hotelTop10[elem].data = [];
      })
      tableApi(tableName).then(res=>{
        let _resData = res.data.data
        //周
        let week_max = Math.max(..._resData['7_charts'].map(elem => elem.lkzl));
        _resData['7_charts'].forEach(elem=>{
            this.hotelTop10.week.maxData.push(week_max);
            this.hotelTop10.week.yaxis.unshift(elem.lgmc);
            this.hotelTop10.week.data.unshift(elem.lkzl);
        })
        //月
        let month_max = Math.max(..._resData['30_charts'].map(elem => elem.lkzl));
        _resData['30_charts'].forEach(elem=>{
            this.hotelTop10.month.maxData.push(month_max);
            this.hotelTop10.month.yaxis.unshift(elem.lgmc);
            this.hotelTop10.month.data.unshift(elem.lkzl);
        })
        //年
        let year_max = Math.max(..._resData['charts'].map(elem => elem.lkzl));
        _resData['charts'].forEach(elem=>{
            this.hotelTop10.year.maxData.push(year_max);
            this.hotelTop10.year.yaxis.unshift(elem.lgmc);
            this.hotelTop10.year.data.unshift(elem.lkzl);
        })

      })
    },
    //旅客来源（列表）
    getTravelFrom(tableName){
      tableApi(tableName).then(res=>{
        let _resData = res.data.data;
        //周
        this.travelListData.week = chunk(_resData['7_charts'],20);
        //月
        this.travelListData.month = chunk(_resData['30_charts'],20);
        //年
        this.travelListData.year = chunk(_resData['charts'],20);
      })
    },
    //旅客来源（地图）
    getTraveMapData(tableName){
      tableApi(tableName).then(res=> {
        let _resData = res.data.data.charts;
        let _mapData = [];
        _resData.forEach(elem=>{
          _mapData.push([{name:'广州'},{name : elem.lklydmc,value :elem.lkzl}])
        })
        this.dealMapData(_mapData)
      })
    },
    //入住区域统计
    getInhotelArea(tableName){
      this.travelArea.week.data=[];
      this.travelArea.month.data=[];
      this.travelArea.year.data=[];
      tableApi(tableName).then(res=>{
        let _resData = res.data.data;
        //周
        _resData['7_charts'].forEach(elem=>{
          this.travelArea.week.data.push({name : elem.qymc,value : elem.lkzl})
        })
        //月
        _resData['30_charts'].forEach(elem=>{
          this.travelArea.month.data.push({name : elem.qymc,value : elem.lkzl})
        })
        //年
        _resData['charts'].forEach(elem=>{
          this.travelArea.year.data.push({name : elem.qymc,value : elem.lkzl})
        })
      })
    }
  },
  created(){
    let _this = this
     //左上角数据统计
    this.getTravelCounts('lkfltj');
    //左下bar数据统计
    this.getHotelTop10('rzlgph');
    //旅客来源（列表）
    this.getTravelFrom('lklytj')
    //旅客来源（地图）
    this.getTraveMapData('lklytjdt')
    //入住区域统计
    this.getInhotelArea('rzqy');
    this.autoplay();
  }
}
</script>

<style lang="scss">
.header {
  width : 1060 / 1920 * 100%;
  height: 90px;
  margin: 0 auto;
  background: url('../assets/img/header-bg.png') center 0px no-repeat;
  background-size: 100% 98%;
  position: relative;
  h1 {
    font-size: 36px;
    color: #49d9fe;
    font-weight: 600;
    line-height:104px;
    text-align: center;
    margin-top: -20px;
  }
}
.travel_main {
  width: 98%;
  min-width: 1200px;
  height: 88vh;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  margin-top: 18px;
  padding-top: 20px;
  padding-left: 30px;
  background : url('../../src/assets/img/travel/travelbg.png');
  background-size : 100% 100%;
  .travel_lefttop {
    width : 250px;
    height: 250px;
    padding-left: 30px;
    ul {
      padding-top: 10px;
      li{

        h3{
          color : #fff;
          font-size: 14px;
          font-weight: 300;
        }
        .num{
          color : #00f6ff;
          font-size: 26px;
          margin-top: 8px;
          margin-bottom: 22px;
          span{
            font-size: 14px;
            margin-left: 6px;
          }
        }
      }
    }
  }
  .travel_leftbottom {
    position: absolute;
    bottom: 20px;
    width: 650 / 1920 * 100%;
    height: 33%;
  }
  .travel_map {
    position: absolute;
    top : 20px;
    margin-left: 46.5%;
    transform: translateX(-50%);
    width: 58%;
    height: 88%;
  }
  .control {
    width: 230px;
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    z-index: 3;
    // background-color: yellow;
    .radios {
      position: absolute;
      right: 26px;
      top: 32px;
      .el-radio {
        margin-left: 10px;
      }
      .el-radio__label {
        color:#fff;
        font-size: 10px;
        padding-left: 4px;
      }
      .el-radio__inner {
        background-color: #0055a9;
        border : none;
      }
    }
  }
  .map_bg {
    position: absolute;
    margin-left: 4px;
    margin-top: -2px;
  }
  .travel_righttop {
    position: absolute;
    top : 30px;
    right: 40px;
    width: 400px;
    height: 380px;
    background-color: #0d3498;
    box-sizing: border-box;
    padding: 14px 8px;
    h2 {
      color : #fff;
      font-size: 16px;
      text-align: center;
    }
    ul.list_context {
      display: flex;
      flex-wrap: wrap;
      margin-top: 12px;
      padding-left: 14px;
      li{
        width: 48%;
        color : #46feff;
        box-sizing: border-box;
        padding: 7px 0;
        padding-left: 8px;
        span.circle_num {
          display: inline-block;
          text-align: center;
          color : #fff;
          font-size: 12px;
          width :16px;
          height: 16px;
          line-height: 16px;
          border-radius: 50%;
          background-color: #0072ff;
          vertical-align: top;
          margin-right: 6px;
        }
        span.context_num ,span.context_name{
          font-size: 14px;
          vertical-align: top;
        }
        span.context_name {
          display: inline-block;
          width: 44px;
        }
      }
    }
    ul.firstList {
      li{
        &:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4){
          span.circle_num {
            background-color: #ff0000;
          }
        }
        &:nth-child(5),&:nth-child(6) {
          span.circle_num {
            background-color: #ff8a00;
          }
        }
      }
    }
    ul.list_nav {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      li {
        box-sizing: border-box;
        display: inline-block;
        width: 7px;
        height: 7px;
        border: 1px solid #fff;
        background-color: transparent;
        margin-right: 4px;
        border-radius: 50%;
        cursor: pointer;
        &:hover {
          background-color: rgba(255,255,255,.3);
        }
      }
      li.active {
        background-color: #fff;
      }
    }
  }
  .travel_rightbottom {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 500 /1920 * 100%;
    height: 40%;
  }
}
@media screen and (max-width : 1800px){
  .travel_main{
    .travel_lefttop {
      ul {
        li{
          h3{
            font-size: 14px;
          }
          .num{
            font-size: 22px;
            span{
              font-size: 14px;
            }
          }
        }
      }
    }
    .travel_righttop {
      transform: scale(.78);
      transform-origin: right top;
    }
  }
}
@media screen and (max-width:1500px){
  .travel_main {
    .travel_righttop{
      width : 364px;
      ul.list_context {
        li {
          padding-left: 0;
        }
      }
    }
  }
}
@media screen and (max-height:900px) {
  .travel_main{
    .travel_lefttop {
      ul {
        li{
          h3{
            font-size: 14px;
          }
          .num{
            font-size: 22px;
            span{
              font-size: 14px;
            }
          }
        }
      }
    }
    .travel_righttop {
      transform: scale(.78);
      transform-origin: right top;
    }
  }
}
</style>
